<template>
  <a-modal
    :visible="visible"
    title="账目红冲"
    cancelText="取消"
    width="750px"
    okText="确定红冲"
    @ok="submit"
    @cancel="cancel"
  >
    <div class="title">
      <a-row>
        <a-col :span="24">收款信息</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">收款单号：{{ modelForm.data.localWaterNo }}</a-col>
      <a-col :span="8">付款类型：{{ formatter(modelForm.data.produceWay, 'produceWay') }}</a-col>
      <a-col :span="8">提交时间：{{ formatter(modelForm.data.paymentTime, 'paymentTime') }}</a-col>
    </a-row>
    <a-row>
      <a-col :span="8">币种：{{ formatter(modelForm.data.currency, 'currency') }}</a-col>
      <a-col :span="8">交易金额：{{ modelForm.data.tradeAmt }}</a-col>
      <a-col :span="8">等额人名币：{{ modelForm.data.rmbAmt }}</a-col>
    </a-row>
    <div class="content">
      <a-row>
        <a-col :span="8">收款人：{{ modelForm.data.recName }}</a-col>
        <a-col :span="8">支付方式：{{ formatter(modelForm.data.paymentMethod, 'paymentMethod') }}</a-col>
        <a-col :span="8">缴款账号：{{ modelForm.data.payAmt }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="8">缴款人：{{ modelForm.data.payName }}</a-col>
        <a-col :span="8">收款账号：{{ modelForm.data.recAmt }}</a-col>
        <a-col :span="8">SWIFT CODE：{{ modelForm.data.swiftCode }}</a-col>
      </a-row>
    </div>
    <div class="title">
      <a-row>
        <a-col :span="24">红冲</a-col>
      </a-row>
    </div>
    <a-row>
      <a-col :span="8">币种：{{ formatter(modelForm.data.currency, 'currency') }}</a-col>
      <a-col :span="8">交易金额：{{ modelForm.data.tradeAmt }}</a-col>
      <a-col :span="8">等额人民币：{{ modelForm.data.rmbAmt }}</a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, createVNode, ref, watch } from "vue";
import { message, modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { getDictByCodesReturnObj } from "../../../tools/get-dict";
import dictEnum from "../../../const/dict";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { queryFinance, editFinance } from "../../../api/module/finance-payment";
export default defineComponent({
  props: {
    visible: {
      type: Boolean
    },
    record: {
      type: Object
    }
  },
  emit: ["close"],
  setup(props, context) {
    watch(props, async props => {
      formState.id = props.record.id;
      formState.path = props.record.path;
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.CURRENCY, // 币种
        dictEnum.PAY_METHOD, // 支付方式
        dictEnum.GENERATION_MODE, // 支付类型
      ]);
      if (props.record.id) {
        queryFinance({id: props.record.id, fncType: '1'}).then(res => {
          if (res.success) {
            modelForm.data = {...res.data}
          }
        })
      }
    });

    const formRef = ref();
    const modelForm = reactive({
      data: {}
    })
    const  { t } = useI18n()
    let dictLists = reactive({
      data: {},
    });

    const formState = reactive({
      sort: 0,
      enable: "true"
    });

    const cancel = e => {
      context.emit("close", 'visibleAccount');
    };

    const submit = e => {
      modal.confirm({
        title: "您是否确定要红冲?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          let params = {
            ...modelForm.data,
            isRedDashed: 1        
          }
          editFinance(params).then(res => {
            if (res.success) {
              message
                .success({ content: "操作成功", duration: 1 })
                .then(() => {
                  cancel();
                });
              
            } else {
              message.error({
                content: "操作失败",
                duration: 1,
              });
            }
          })
        }
      })
    };
    const formatter = (value, type) => {
      let result = '';
      switch (type) {
        case 'currency': {
          const item = dictLists.data[dictEnum.CURRENCY]
                        ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentMethod': {
          const item = dictLists.data[dictEnum.PAY_METHOD]
                        ? dictLists.data[dictEnum.PAY_METHOD].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'produceWay': {
          const item = dictLists.data[dictEnum.GENERATION_MODE]
                        ? dictLists.data[dictEnum.GENERATION_MODE].find((v) => v.value == value)
                        : {};
          result = item ? item.label : "";
        }
        break;
        case 'paymentTime': {
          result = value ? moment(value).format('YYYY-MM-DD') : "";
        }
        break;
      }
      return result;
    }

    return {
      t,
      cancel,
      submit,
      formatter,
      formRef,
      modelForm,
      formState,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };
  }
});
</script>
<style lang="less" scoped>
.title {
  color: #000;
  font-weight: 700;
}
/deep/.ant-col {
  padding: 10px 0;
}
.content {
  margin: 0px -10px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px dashed #d1d1d1;
}
</style>
